<script>
import { defineComponent, computed } from 'vue'
import FanImage from '../image/image.vue'
import FanLoading from '../loading/loading.vue'
import FanRichText from '../rich-text/rich-text.vue'
import { createNamespace, transformStyleSize } from '../utils'

export default defineComponent({
  name: createNamespace('UserPanel')[0],
  options: {
    // https://uniapp.dcloud.io/matter.html#mp
    virtualHost: true
  },
  components: { FanImage, FanLoading, FanRichText },
  props: {
    hasLogin: {
      type: Boolean,
      default: false
    },
    loading: {
      type: Boolean,
      default: false
    },
    avatar: {
      type: String,
      default: 'https://img.dac6.cn/resource/avatar.png'
    },
    name: {
      type: String,
      default: '用户昵称'
    },
    role: String,
    vip: Boolean,
    desc: String
  },
  emits: ['click'],
})
</script>

<template>
  <div class="fan-upanel">
    <div class="fan-flex-center fan-upanel__in" @click="$emit('click')">
      <FanImage width="60px" height="60px" :src="avatar" mode="aspectFill" radius="50%"
        :style="{ marginRight: '15px' }" />

      <div v-if="hasLogin && loading" class="fan-flex-1 fan-flex">
        <FanLoading type="line" color="var(--fan-primary-color)" />
      </div>
      <div v-else-if="hasLogin" class="fan-flex-1">
        <div class="fan-flex fan-align-center" style="flex-wrap: nowrap">
          <div class="fan-ellipsis fan-upanel__name">{{ name }}</div>
          <div v-if="role" class="fan-upanel__role" :class="{ vip: vip }">{{ role }}</div>
        </div>
        <FanRichText v-if="desc" class="fan-upanel__desc" :content="desc" />
      </div>
      <div v-else class="fan-flex-1">
        <div class="fan-flex fan-align-center" style="flex-wrap: nowrap">
          <div class="fan-ellipsis fan-upanel__name">点击登录</div>
        </div>
        <div class="fan-upanel__desc">登录后解锁更多实用功能</div>
      </div>
    </div>
  </div>
</template>

<style lang="less">
.fan-upanel {
  padding: 6px 12px;

  &__in {
    height: 90px;
    padding: 0 15px;
    background: #fff;
    border-radius: 8px;
  }

  &__name {
    font-size: 17px;
    color: #262626;
    font-weight: 600;
    margin-right: 7px;
  }

  &__role {
    flex: none;
    font-size: 11px;
    color: #201502;
    padding: 1px 10px;
    background-image: linear-gradient(90deg, #a5a5a5, #fafafa);
    border-radius: 10px;

    &.vip {
      color: #f5d8ac;
      background: #333334;
    }
  }

  &__desc {
    font-size: 14px;
    color: #ccc;
    font-weight: 500;
    margin-top: 4px;
  }
}
</style>